<form name="form" ng-init="vm.init();refresh(vm.callback);" ng-submit="vm.mapping(form.$valid)" novalidate>
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">MyBatis 映射文件</div>
      <div class="pull-right">
        <div class="btn-group x-btn-list">
          <button class="btn btn-primary" type="submit" ng-disabled="form.$invalid || !vm.hasSql">映射</button>
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
              ng-disabled="form.$invalid || !vm.hasSql">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><button type="button" class="btn btn-default btn-block"
                ng-click="vm.mapping(form.$valid, 'jpa')">映射（JPA）</button></li>
          </ul>
        </div>
        <div class="btn-group x-btn-list">
          <button id="copy" class="btn btn-success" type="button" data-clipboard-action="copy"
              ng-disabled="!vm.hasCode">复制</button>
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
              ng-disabled="!vm.hasCode">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><button type="button" class="btn btn-default btn-block" ng-click="vm.save()">保存文件</button></li>
          </ul>
        </div>
        <button class="btn btn-danger" type="button" ng-click="vm.reset()">重置</button>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div class="col-md-6">
      <fieldset>
        <legend>映射表与模板</legend>
        <div class="x-page-scope">
          <div class="form-group">
            <div class="input-group">
              <input type="text" name="daoName" class="form-control" ng-model="vm.daoName" autofocus required
                  placeholder="DAO（package.class）" ng-class="{'x-invalid': form.$submitted && form.daoName.$invalid}">
              <span class="input-group-addon">.java</span>
            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <input type="text" name="modelName" class="form-control" ng-model="vm.modelName" required
                  placeholder="Model（package.class）" ng-class="{'x-invalid': form.$submitted && form.modelName.$invalid}">
              <span class="input-group-addon">.java</span>
            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <input type="text" name="mapperName" class="form-control" ng-model="vm.mapperName" required
                  placeholder="Mapper" ng-class="{'x-invalid': form.$submitted && form.mapperName.$invalid}">
              <span class="input-group-addon">.xml&nbsp;</span>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">SQL与模板
              <font color="green" style="font-weight:normal">（类型标识符：{jdbcType:VARCHAR,javaType:String}）</font>
            </label>
            <uib-tabset active="0" type="tabs" class="x-mapper">
              <uib-tab index="0" heading="SQL">
                <div class="x-editor">
                  <pre id="sql-editor"></pre>
                </div>
              </uib-tab>
              <uib-tab index="1" heading="DAO">
                <textarea name="daoTemplate" class="form-control" ng-model="vm.templates.dao" required
                    ng-class="{'x-invalid': form.$submitted && form.daoTemplate.$invalid}"></textarea>
              </uib-tab>
              <uib-tab index="2" heading="Model">
                <textarea name="modelTemplate" class="form-control" ng-model="vm.templates.model" required
                    ng-class="{'x-invalid': form.$submitted && form.modelTemplate.$invalid}"></textarea>
              </uib-tab>
              <uib-tab index="3" heading="Mapper">
                <textarea name="mapperTemplate" class="form-control" ng-model="vm.templates.mapper" required
                    ng-class="{'x-invalid': form.$submitted && form.mapperTemplate.$invalid}"></textarea>
              </uib-tab>
            </uib-tabset>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="col-md-6">
      <fieldset>
        <legend>映射文件</legend>
        <div class="x-page-scope">
          <div ng-show="vm.error == ''">
            <uib-tabset active="vm.activeTab" type="tabs" class="x-mapper">
              <uib-tab index="0" heading="DAO">
                <pre class="x-output" id="dao-viewer"></pre>
              </uib-tab>
              <uib-tab index="1" heading="Model">
                <pre class="x-output" id="model-viewer"></pre>
              </uib-tab>
              <uib-tab index="2" heading="Mapper">
                <pre class="x-output" id="mapper-viewer"></pre>
              </uib-tab>
            </uib-tabset>
          </div>
          <pre class="alert alert-danger" ng-if="vm.error">{{vm.error}}</pre>
        </div>
      </fieldset>
    </div>
  </div>
</form>
